<template>
    <el-card class='box-card'>
         <div id="myLine" :style="echartStyle"></div>
    </el-card>
</template>

<script>
import { defineComponent } from 'vue'//在 echarts.vue 中
import { toRaw } from '@vue/reactivity';
export default defineComponent({
    props:{
        echartStyle: {  // 样式 - 1
            type: Object,
            default() {
                return {}
            }
        },
        titleText: {   //标题文本 - 1
            type: String,
            default: ''
        },

        opinion: {    //区域名称 - 1
            type: Array,
            default() {
                return []
            }
        },
        opinionData: {   // 区域数据 - 1
            type: Array,
            default() {
                return []
            }
        },
        x: {  // x 轴
            type: Array,
            default() {
                return []
            }

        },
        y: {
            type: Array,
             default() {
                return [{ type: 'value' }]
            }
        }
    },
    data(){
        return {
            seriesData : [],
            xData: []
        }
    },
    mounted(){
        this.$nextTick(function() {
            setTimeout(()=>{
                this.drawLine()
                    window.addEventListener("resize", () => {
                        this.charts.resize();
                    })
            },300)
        })
    },
    methods:{
        // 绘制折线图
        drawLine(){
        this.charts = $echarts.init(document.getElementById('myLine'));
        this.charts.on("click", this.eConsole);
        this.charts.setOption({
                title: {
                    left: 'center',
                    text: this.titleText, //标题文本
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 'left',
                    data: this.opinion // 区域名称
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {   // x 轴
                    type: 'category',
                    boundaryGap: false,
                    data: toRaw(this.x)
                },
                yAxis: this.y,
                series: toRaw(this.opinionData) // 区域数据
             })
        }

    }
})
</script>

<style lang='scss' scoped>
#myLine{
    width: 100%;
}
</style>